{include file="common:header" /}
{include file="common:side" /}
<div id="page-wrapper">
  <!-- 采购商管理 -- 采购商数据列表 -->
  <!--*************************** content部分开始 ******************-->
  <div class="container-fluid" id="m_main">
    <div class="row m-t-20">
      <div class="col-sm-12">
        <div class="white-box">
          <h2 class="box-title m-b-20">{$user.nickname}数据列表</h2>
          <!-- <p class="text-muted m-b-30">Data table example</p> -->
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">商品名称：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <select class="selectpicker" data-style="form-control" v-model="curItem.product_id" id="product_id" @change="getTypeList">
                    <option value="">选择</option>
                    {foreach name="goods" item="v"}
                    <option value="{$v.id}">{$v.goods_name}</option>
                    {/foreach}
                  </select>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">规格：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <select class="selectpicker" data-style="form-control" v-model="curItem.type_id" id="type_id">
                    <option value="0">选择</option>
                    <option v-if="typeList.length>0" v-for="item in typeList" :value="item.id">{{item.spec_name}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">供应商：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <select class="selectpicker" data-style="form-control" v-model="curItem.supplier" id="supplier">
                    <option value="0">选择</option>
                    {foreach name="suppliers" item="v"}
                    <option value="{$v.id}">{$v.company}</option>
                    {/foreach}
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">价格：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" v-model="curItem.price">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <button class="btn btn-outline btn-info" @click="doSubmit">添加</button>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table id="myTable" class="table table-striped color-table info-table">
              <thead>
                <tr>
                  <th>采购时间</th>
                  <th>商品名称</th>
                  <th>规格</th>
                  <th>供应商名称</th>
                  <th>价格</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in dataList">
                  <td>{{item.buy_time}}</td>
                  <td>{{item.goods_name}}</td>
                  <td>{{item.goods_spec}}</td>
                  <td>{{item.scompany}}</td>
                  <td>{{item.price}}</td>
                </tr>
              </tbody>
            </table>
            <pagination :tr-all="trAll" :page-cur="pageCur" :page-all="pageAll" :page-size="pageSize" @page-to="pageTo" ref="c1"></pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!--*************************** content部分结束 ******************-->

  <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
</div>
{include file="common:js" /}
<script type="text/javascript" src="/web/js/search_list.js"></script>
{include file="common:footer" /}
{include file="component:pagination" /}

  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          purchase_id:'',//当前页面采购商id
          purchase_info:'',//当前页面采购商信息（名称头部用）
          searchUrl: "/dboard/purchaser/pOrderList", //搜索接口
          draw: '', //校验字段
          dataList: [], //搜索列表数据
          trAll: 0, //数据总数
          pageAll: 0, //页码总数
          pageCur: 1, //当前页
          pageSize: 10, //每页数量
          curItem:{product_id:'',type_id:'',supplier:'',price:''},//新增数据
          typeList:[],//商品对应的规格列表
        }
      },
      mounted() {
        this.initSelectPicker();
        this.pageTo(1);
      },
      methods: {
        // 点击下拉时按最新数据渲染下拉选项
        initSelectPicker(){
          $("#type_id").on('shown.bs.select',function(e){
            $('#type_id').selectpicker('refresh');
          })
        },
        // 搜索当前页并渲染列表
        pageTo(page) {
          var that = this;
          var puid = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
          var params = {puid:puid};
          searchList(that, page, params, (res) => {
            that.purchase_info = res.data.purchase_info;
          }, (fail) => {}, (error) => {})
        },
        //获取商品对应的规格列表
        getTypeList(){
          var that = this;
          axios.post('/dboard/goods/getGoodsSpec',{gid:that.curItem.product_id},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
            if(res.data.Code==0){
              that.typeList = res.data.Data;
            }else{
              alert(res.data.Msg);
            }
          }).catch(err=>{})
        },
        // 添加
        doSubmit(){
          var that = this;
          //puid:当前采购商 uid，url 会带过来；gid 商品 id，goods_name 商品名称,goods_spec 规格,scompany 供应商名称,sid 供应商 id，price 价格
          var params = {};
          params.puid = window.location.href.substr(window.location.href.lastIndexOf('/') + 1),
          params.gid = that.curItem.product_id,
          params.goods_name = $('#product_id').find("option:selected").text(),
          // params.goods_spec_id = that.curItem.type_id,
          params.goods_spec = $('#type_id').find("option:selected").text(),
          params.sid = that.curItem.supplier,
          params.scompany = $('#supplier').find("option:selected").text(),
          params.price = that.curItem.price;

          axios.post('/dboard/purchaser/addOrder',params,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
            if(res.data.Code==0){
              alert(res.data.Msg);
              that.pageTo(that.pageCur);
              // 编辑框清空
              that.curItem = {product_id:'',type_id:'',supplier:'',price:''};
              $('#product_id').val('');
              $('#type_id').val('');
            }else{
              alert(res.data.Msg);
            }
          }).catch(err=>{})
        }
      }
    })
  </script>
